<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">

</head>
<body style="margin-top: -50px">
	<div class="panel panel-default" style="margin-top: 0px">
		<div class="panel-heading">
			<h3 class="panel-title">
				<i class="glyphicon glyphicon-th"></i> 违章查询
			</h3>
		</div>
		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;">

				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">车牌号码</div>
						<input class="form-control has-success" type="text"
							placeholder="请输入车牌号码，支持模糊查询" id="searchCondition" /> <input
							id="condition" type="text" hidden value="" /> <input id="pn"
							type="text" hidden value="1" />
					</div>
				</div>
				<button type="button" class="btn btn-warning" id="search_btn">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>

			<button class="btn btn-danger"
				style="float: right; margin-left: 10px;" id="delCars_btn">
				<i class=" glyphicon glyphicon-remove"></i> 批量删除
			</button>
			<button class="btn btn-info" style="float: right; margin-left: 10px;"
				id="add">
				<i class=" glyphicon glyphicon-plus"></i> 新增
			</button>
			<br>
			<hr style="clear: both;">
			<div class="table-responsive">
				<table class="table  table-bordered">
					<thead>
						<tr>
							<th width="30">#</th>
							<th width="30"><input type="checkbox" id="selectAll"></th>
							<th>车牌号码</th>
							<th>违章项目</th>
							<th>违章时间</th>
							<th>违章罚款</th>
							<th>违章扣分</th>
							<th>驾驶员</th>
							<th>违章地点</th>
							<th>违章备注</th>
							<th width="125">操作</th>
						</tr>
					</thead>
					<!-- 信息展示 -->
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
			<!-- 分页信息 -->
			<div class="row" id="page_div"></div>
		</div>
		<!-- 新增/修改模态框 -->
		<div class="modal fade" id="carModel" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">违章信息登记</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="form1">
							<input type="text" id="inputbreakId" name="brId" hidden>
							<div class="form-group">
								<label for="inputbreakLicense" class="col-sm-2 control-label">车牌号码</label>
								<div class="col-sm-10">
									<select class="form-control" id="inputbreakLicense" name="brCarlicense">

									</select>
							</div>
						</div>
							<div class="form-group">
								<label for="inputcontent" class="col-sm-2 control-label">违章项目</label>
								<div class="col-sm-10">
									<select class="form-control" id="inputcontent" name="brContent">

									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputBreaktime" class="col-sm-2 control-label">违章时间</label>
								<div class="col-sm-10">
									<input type="datetime" class="form-control" id="inputBreaktime"
										name="brTime" required="required">
								</div>
							</div>
							<div class="form-group">
								<label for="inputamout" class="col-sm-2 control-label">违章罚款</label>
								<div class="col-sm-10">
									<input type="number" class="form-control" id="inputamout"
										name="brAmount" required="required">
								</div>
							</div>
							<div class="form-group">
								<label for="inputcore" class="col-sm-2 control-label">违章扣分</label>
								<div class="col-sm-10">
									<input type="number" class="form-control" id="inputcore"
										name="brCore"  required="required">
								</div>
							</div>
							<div class="form-group">
								<label for="inputdriver" class="col-sm-2 control-label">驾驶员</label>
								<div class="col-sm-10">
									<select class="form-control" id="inputdriver" name="brDriver">

									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputplace" class="col-sm-2 control-label">违章地点</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputplace"
										name="brPlace"  required="required">
								</div>
							</div>
							<div class="form-group">
								<label for="inputremark" class="col-sm-2 control-label">违章备注</label>
								<div class="col-sm-10">
									<input type="text" class="form-control"
										id="inputremark" name="brRemark"
										required="required">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub1">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 新增修改模态框结束 -->
		<!-- 详细信息模态框 -->
		<div class="modal fade" id="carInfoModel" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">详细违章信息</h4>
					</div>
					<div class="modal-body">
						<table class="table  table-bordered">
							<thead>
								<tr>
									<th width="200px;">名称</th>
									<th>内容</th>

								</tr>
							</thead>
							<tbody id="info_tb">

							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 详细信息模态框结束 -->
		<script
			src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//记载数据
				loadBreak();
				//查询
				$("#search_btn").click(function() {
					var searchcondition = $("#searchCondition").val();
					$("#condition").val(searchcondition);
					$("#pn").val(1);
					loadBreak();
				})
				//复选框的选中与取消
				$("#selectAll").change(function() {
					if ($(this).prop('checked') == true) {
						$('input[name="cb"]').each(function() {
							$(this).prop('checked', true);
						})
					} else {
						$('input[name="cb"]').each(function() {
							$(this).prop('checked', false);
						})
					}

				});
				//新增时的函数
				$('#carModel').on('shown.bs.modal', function() {

				})
				//批量删除
				$("#delCars_btn")
						.click(
								function() {
									var ids = [];
									$(":checkbox[name=cb]:checked").each(
											function() {
												ids.push($(this).val());
											});
									if (ids.length == 0) {
										alert("请选择删除记录");
										return;
									}
									if (confirm("是否删除？")) {
										$
												.ajax({
													url : "${pageContext.request.contextPath}/break/delete",
													type : "post",
													data : {
														"carIds" : ids
																.join(",")
													},
													success : function(data) {
														alert(data);
														loadBreak();
													}
												})
									}

								});
				//新增
				$("#add")
						.click(
								function() {
									$
											.ajax({
												url : "${pageContext.request.contextPath}/break/add",
												type : "get",
												dataType : "json",
												success : function(data) {
													var brCarlicense = data.brCarlicense;
													var brcontent = data.brcontent;
													var brdriver = data.brdriver;
													var brCarlicenseStr = "";
													for (var i = 0; i < brCarlicense.length; i++) {
														brCarlicenseStr = brCarlicenseStr
																+ "<option>"
																+ brCarlicense[i]
																+ "</option>";
													}
													
													$("#inputbreakLicense").html(
															brCarlicenseStr);
													
													var brcontentStr = "";
													for (var i = 0; i < brcontent.length; i++) {
														brcontentStr = brcontentStr
																+ "<option>"
																+ brcontent[i]
																+ "</option>";
													}
													$("#inputcontent").html(
															brcontentStr);
													var brdriverStr = "";
													for (var i = 0; i < brdriver.length; i++) {
														brdriverStr = brdriverStr
																+ "<option>"
																+ brdriver[i]
																+ "</option>";
													}
													$("#inputdriver")
															.html(brdriverStr);
													
													var da = new Date().format('yyyy-MM-dd HH:mm:ss');
													$("#inputBreaktime").val(da);
													
												}
											});

									$('#carModel').modal('show');
								})
								
				//保存新增或修改
				$("#sub1")
						.click(
								function() {
									
									if ($("#inputbreakLicense option").length == 1) {
										$
												.ajax({
													url : "${pageContext.request.contextPath}/break/doUpdate",
													type : "post",
													data : $("#form1")
															.serialize(),
													error : function() {
														alert("请输入正确日期格式");
													},
													success : function(data) {
														$('#carModel').modal(
																'hide');
														loadBreak();
													}

												});
									} else {
										$
												.ajax({
													url : "${pageContext.request.contextPath}/break/doAdd",
													type : "post",
													data : $("#form1")
															.serialize(),
													error : function() {
														alert("请输入正确日期格式");
													},
													success : function(data) {
														$('#carModel').modal(
																'hide');
														loadBreak();

													}

												});
									}
								});

				$('#carModel').on('hidden.bs.modal', function() {
					$("#form1")[0].reset();
				})

			})
		</script>

		<script type="text/javascript">
			function loadBreak() {
				var pn = $("#pn").val();
				var condition = $("#condition").val();
				$
						.ajax({
							url : "${pageContext.request.contextPath}/break/getAll",
							type : "post",
							dataType : "json",
							data : {
								"pn" : pn,
								"condition" : condition
							},
							success : function(data) {
								var list = data.list;
								var trStr = "";
								for (var i = 0; i < list.length; i++) {
									trStr = trStr + "<tr>";
									trStr = trStr + "<td>" + (i + 1) + "</td>";
									trStr = trStr
											+ "<td><input type='checkbox' value='"+list[i].brId+"' name='cb'></td>";
									trStr = trStr + "<td>" + list[i].brCarlicense
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brContent
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brTime
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brAmount
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brCore
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brDriver
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brPlace
											+ "</td>";
									trStr = trStr + "<td>" + list[i].brRemark
											+ "</td>";
									trStr = trStr + "<td>";
									trStr = trStr
											+ "<button type='button' class='btn btn-success btn-xs' name='BreakInfo' brId='"+list[i].brId+"'><i class=' glyphicon glyphicon-list-alt'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr
											+ "<button type='button' class='btn btn-primary  btn-xs' name='updateBreak' brId='"+list[i].brId+"'><i class=' glyphicon glyphicon-pencil'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr
											+ "<button type='button' class='btn btn-danger   btn-xs' name='delBreak' brId='"+list[i].brId+"'><i class=' glyphicon glyphicon-remove'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr
											+ "<button type='button' class='btn btn-info   btn-xs' name='showPicture' brId='"+list[i].brId+"'><i class=' glyphicon glyphicon-picture'></i></button>";
									trStr = trStr + "</td>";
									trStr = trStr + "</tr>";
								}
								$("#tb1").html(trStr);
								var divStr = "";
								divStr = divStr + "<div align='center'>";
								divStr = divStr + "<ul class='pagination'>";
								divStr = divStr
										+ "<li><a href='javascript:changePage(1)'>首页</a></li>";
								divStr = divStr + "<li>";
								if (data.hasPreviousPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-1)' aria-label='Previous'> <span aria-hidden='true'>«</span></a>";
								}
								divStr = divStr + "</li>";
								var navigatepageNums = data.navigatepageNums;
								for (var i = 0; i < navigatepageNums.length; i++) {
									if (navigatepageNums[i] == data.pageNum) {
										divStr = divStr
												+ "<li class='active'><a href='#'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
									if (navigatepageNums[i] != data.pageNum) {
										divStr = divStr
												+ "<li><a href='javascript:changePage("
												+ navigatepageNums[i] + ")'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
								}
								divStr = divStr + "<li>";
								if (data.hasNextPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-2)' aria-label='Next'> <span aria-hidden='true'>»</span> </a>";
								}
								divStr = divStr + "</li>";

								divStr = divStr
										+ "<li><a href='javascript:changePage("
										+ data.pages + ")'>尾页</a></li>";
								divStr = divStr + "</ul>";
								divStr = divStr + "</div>";
								divStr = divStr + "<div align='center'>当前第 "
										+ data.pageNum + " 页.总共 " + data.pages
										+ " 页.一共 " + data.total + " 条记录</div>";
								$("#page_div").html(divStr);
								//绑定函数
								deleteBreak()
								showPictures();
								updateBreak();
								carInfo();
							}

						});

			}
			//翻页
			function changePage(page) {
				var pn = $("#pn").val();
				if (page == -1) {
					$("#pn").val(pn - 1);
				} else if (page == -2) {
					var pn1 = parseInt(pn);
					$("#pn").val(pn1 + 1);
				} else {
					$("#pn").val(page);
				}

				loadBreak();
			}
			//单个删除
			function deleteBreak() {
				$("[name=delBreak]").click(function() {
					var carId = $(this).attr("brId");
					$.ajax({
						url : "${pageContext.request.contextPath}/break/delete",
						type : "post",
						data : {
							"carIds" : carId
						},
						success : function(data) {
							loadBreak();
						}
					})

				});
			}
			//修改
			function updateBreak() {
				$("[name=updateBreak]").click(function() {
									var carId = $(this).attr("brId");
									
									$.ajax({
										url : "${pageContext.request.contextPath}/break/update",
										type : "post",
										data : {
											"carId" : carId
										},
										dataType : "json",
										error : function() {
											alert("请输入正确日期格式");
										},
										success : function(data) {
											var brCarlicenses = data.brCarlicense;
											var brcontents = data.brcontent;
											var brdrivers = data.brdriver;
											var breakb = data.breaks;
											var brCarlicenseStr = "";
											brCarlicenseStr = brCarlicenseStr
													+ "<option selected >"
													+ breakb.brCarlicense
													+ "</option>"
													;
											
											$("#inputbreakLicense").html(
													brCarlicenseStr);
											var brcontentStr = "";
											for (var i = 0; i < brcontents.length; i++) {
												if (brcontents[i] == breakb.brContent) {
													brcontentStr = brcontentStr
															+ "<option selected>"
															+ brcontents[i]
															+ "</option>";
												} else {
													brcontentStr = brcontentStr
															+ "<option>"
															+ brcontents[i]
															+ "</option>";
												}
											}
											$("#inputcontent").html(
													brcontentStr);
											
											
											var brdriverStr = "";
											for (var i = 0; i < brdrivers.length; i++) {
												if (brdrivers[i] == breakb.brDriver) {
													brdriverStr = brdriverStr
															+ "<option selected>"
															+ brdrivers[i]
															+ "</option>";
												} else {
													brdriverStr = brdriverStr
															+ "<option>"
															+ brdrivers[i]
															+ "</option>";
												}
											}
											$("#inputdriver")
													.html(brdriverStr);
											
											
											

											$("#inputBreaktime").val(
													breakb.brTime);
											$("#inputamout").val(
													breakb.brAmount);
											$("#inputcore").val(
													breakb.brCore);
											$("#inputplace").val(
													breakb.brPlace);
											$("#inputremark").val(
													breakb.brRemark);
											$("#inputbreakId").val(
													breakb.brId);
										}
									});
							$('#carModel').modal('show');
						})
			}

			//展示图片
			function showPictures() {
				$("[name=showPicture]").click(function() {
									var brId = $(this).attr("brId");
									location.href = '${pageContext.request.contextPath}/break/showPicture?brId='
											+ brId;
								});
			}
			//展示详情
			function carInfo() {
				$("[name=BreakInfo]")
						.click(
								function() {
									var carId = $(this).attr("brId");
									$
											.ajax({
												url : "${pageContext.request.contextPath}/break/showInfo",
												type : "post",
												data : {
													"carId" : carId
												},
												dataType : "json",
												success : function(data) {
													var str = "";
													str = str
															+ "<tr><td>车牌号码</td><td>";
													str = str + data.brCarlicense;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>违章项目</td><td>";
													str = str + data.brContent;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>违章时间</td><td>";
													str = str + data.brTime;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>违章罚款</td><td>";
													str = str + data.brAmount;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>违章扣分</td><td>";
													str = str + data.brCore;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>驾驶员</td><td>";
													str = str + data.brDriver;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>违章地点</td><td>";
													str = str + data.brPlace;
													str = str + "</td></tr>";
													str = str
															+ "<tr><td>违章备注</td><td>";
													str = str
															+ data.brRemark;
													str = str + "</td></tr>";
													
													$("#info_tb").html(str);
													$('#carInfoModel').modal(
															'show');
												}
											})
								})
			}
			Date.prototype.format = function(format){
			    var o = {
			        "M+" : this.getMonth()+1, //month
			        "d+" : this.getDate(), //day
			        "H+" : this.getHours(), //hour
			        "m+" : this.getMinutes(), //minute
			        "s+" : this.getSeconds(), //second
			        "q+" : Math.floor((this.getMonth()+3)/3), //quarter
			        "S" : this.getMilliseconds() //millisecond
			    }
			 
			    if(/(y+)/.test(format)) {
			        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
			    }
			 
			    for(var k in o) {
			        if(new RegExp("("+ k +")").test(format)) {
			            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
			        }
			    }
			    return format;
			}
		</script>
</body>
</html>